<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../../public/js/jquery.min.js"></script>
    <title>主页特效</title>
    <style>
       .texiao
       {
       	width: 1349px;
       	margin: 0px;
       }
       .donghua
       {
       	width: 1170px;
       	margin: 0px auto;
       	text-align: center;
       }
       .donghua  h4
       {
       	margin: 60px 0;
       	font-size: 32px;
       	font-weight: 500;
        line-height: 48px;
        }
        .texiaoul
        {
        	list-style: none;
        	width: 1170px;
        	margin: 20px auto;
        	
        }
        .tuceng
        {
        	display:none;     
        	color: white;      	
        }
        .texiaoli
        {
        	width: 380px;
        	margin-bottom: 10px;
        }
        .texiaoli a
        {
        	text-decoration: none;
        }
        .texiaoli img
        {
        	width: 100%;
        	height: 100%;
        }
        .col-xs-4
        {
           float: left;
           margin-left: 10px;
        }
    </style>
</head>

<body>
   <div class="texiao">
   	<div class="donghua">
   		<h4>超过370,000商户使用生意专家管理进销存、会员和营销</h4>
   		<section>
   		    <ul class="texiaoul">
   		    	<div class="col-xs-4">
   		    		<li class="texiaoli" >
   		    			<a href="">
   		    				<img src="../../public/images/index/story-01.jpg"/>
   		    				<!--<div class="tuceng">-->
   		    					<p>老树茶楼</p>
   		    					<span>'以前办过一批按次消费的会员卡，每次在本子上消次，太麻烦，后来只好放弃'
   		    					现在有了生意专家，我又能继续开展储值了</span>
   		    				<!--</div>-->
   		    			</a>
   		    		</li>
   		    		<li class="texiaoli" >
   		    			<a href="">
   		    				<img src="../../public/images/index/story-02.jpg"/>
   		    				<!--<div class="tuceng">-->
   		    					<!--<p>爱家家居生活馆</p>
   		    					<span>'店里货品又多又杂，以前，店员每天给我发销售、盘货信息，麻烦。
   		    						现在有了生意专家，我在手机上就可以查到所有信息，随时随地，方便'</span>-->
   		    				<!--</div>-->
   		    			</a>
   		    		</li>
   		    	</div>
   		    	
   		    	<div class="col-xs-4">
   		    		<li class="texiaoli" >
   		    			<a href="">
   		    				<img src="../../public/images/index/story-03.jpg"/>
   		    				<!--<div class="tuceng">-->
   		    					<!--<p>乐蔬健康餐饮</p>
   		    					<span>'结账的时候，顾客同步收到一条感谢短信，收到短信的顾客满是惊喜。
   		    						每当这个时刻，我就知道，用生意专家，选对了'</span>-->
   		    				<!--</div>-->
   		    			</a>
   		    		</li>
   		    		<li class="texiaoli" >
   		    			<a href="">
   		    				<img src="../../public/images/index/story-04.jpg"/>
   		    				<!--<div class="tuceng">-->
   		    					<!--<p>Z00 COFFEE</p>
   		    					<span>'用优惠券功能，只是图个新鲜，试试看。到现在整3个月，每天都有人领券，
   		    						也总有新面孔，凭券来消费，生意就这样红火起来了'</span>-->
   		    				<!--</div>-->
   		    			</a>
   		    		</li>
   		    	</div>
   		    	
   		    	<div class="col-xs-4">
   		    		<li class="texiaoli" >
   		    			<a href="">
   		    				<img src="../../public/images/index/story-05.jpg"/>
   		    				<!--<div class="tuceng">-->
   		    					<!--<p>智慧宝贝母婴童装</p>
   		    					<span>'3家店都在用！会员跨店消费非常方便！真是我生意的好帮手，不愧是生意专家！</span>-->
   		    				<!--</div>-->
   		    			</a>
   		    		</li>
   		    		<li class="texiaoli" >
   		    			<a href="">
   		    				<img src="../../public/images/index/story-06.jpg"/>
   		    				<!--<div class="tuceng">-->
   		    					<!--<p>海盗船精品</p>
   		    					<span>'以前办会员卡都是发张卡片，容易丢，会员还总是忘带。现在用生意专家
   		    						会员来消费，只要报一下姓名或手机号，就能识别身份了，还省了印卡的成本'</span>-->
   		    				<!--</div>-->
   		    			</a>
   		    		</li>
   		    	</div>
   		    </ul>
   		</section>
   	</div>
   </div>
   
    <script>
        var divs = document.getElementsByClassName('texiaoli');
      
        for (var i = 0; i < divs.length; i++) {

            var div = divs[i];

            var height = div.clientHeight;

            var width = div.clientWidth;

            var view = document.createElement('div')
            
            div.appendChild(view)

            view.style.width = width + 'px';

            view.style.height = height + 'px';

            view.style.backgroundColor = 'black';

            view.style.opacity = 0.2;

            view.style.position = 'absolute';
            
             var p = document.createElement('p');
             var span = document.createElement('span')
             
             	p.innerText='<h4>老树茶楼</h4>'
             	span.innerText='<span>以前办过一批按次消费的会员卡，每次在本子上消次，太麻烦，后来只好放弃现在有了生意专家，我又能继续开展储值了</span>'
           view.appendChild(p)
           view.appendChild(span)
              

            $(divs[i]).bind("mouseenter mouseleave",
                function (e) {
                    var w = $(this).width();
                    var h = $(this).height();
                    var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
                    var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
                    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;   //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
                    var eventType = e.type;
                    var dirName = new Array('上方', '右侧', '下方', '左侧');
                    var showView = this.childNodes[0];
                    console.log(this.childNodes)
                    if (e.type == 'mouseenter') {
                        // $(this).html(dirName[direction] + '进入');
                      
                        
                        showView.style.backgroundColor = 'blue'
                        showView.style.top = direction == 0 ? -height + 'px' : direction == 2 ? height + 'px' : 0 ;
                        showView.style.left = direction == 1 ? width + 'px' : direction == 3 ? -width + 'px' : 0 ;
                        $(showView).animate({
                            left : '0px',
                            top : '0px'
                        },180)
                        
                    } else {
                        // $(this).html(dirName[direction] + '离开');
//                      console.log(dirName[direction] + '离开')
                        var top = direction == 0 ? -height + 'px' : direction == 2 ? height + 'px' : 0 ;
                        var left = direction == 1 ? width + 'px' : direction == 3 ? -width + 'px' : 0 ;
                        $(showView).animate({
                            top : top ,
                            left : left
                        },180)
                    }
                });

        }
    </script>
</body>

</html>